<template>
  <div class="dynamic_form_item">
    <a-form-item :name="props.question.key">
      <template v-slot:label>
        <label for="">{{ props.question.label }}</label>
      </template>
      <div>
        <div class="text_line" v-if="question.type === 'dictionary'">
          <span>{{ dictionaryFn(question.state, question.value) }}</span>
        </div>
        <div class="text_line" v-else-if="question.type === 'html'">
          <div v-html="question.value"></div>
        </div>
        <div class="text_line" v-else-if="question.type === 'time'">
          <div>{{question.value == null ? '-' : dayjs(question.value).format(question.state.format || 'YYYY-MM-DD HH:mm:ss') }}</div>
        </div>
        <div class="text_line" v-else-if="question.type === 'array'">
          <div v-for="(aItem, aIndex) in question.value"><i v-if="aIndex">, </i>{{ aItem[question.state.keyName] || aItem || '' }}</div>
        </div>
        <div class="text_line" v-else-if="question.type === 'join'">
          {{ question.value.join( question.state.joinName || ',') }}
        </div>
        <div class="text_line" v-else>{{ question.value }}</div>
      </div>
    </a-form-item>
  </div>
</template>
<script setup lang="ts">
import { watch, getCurrentInstance, onMounted, onUnmounted } from 'vue';
import { QuestionBase } from '../../../question-base';
import { dictionaryFn } from '@/filters/index';
import dayjs, { Dayjs } from 'dayjs'
//subject变量
const { proxy }: any = getCurrentInstance();
let props = defineProps<{ question: QuestionBase<any>; formData: any }>();
const emit = defineEmits(['update:formData']);
watch(
  () => props.question.value,
  (val) => {
    emit('update:formData', val);
  },
  { flush: 'sync' }
);

onMounted(() => {});
</script>

<style lang="less" scoped>
@import url('./input-text.component.less');
</style>
